<template>
<view>
	<view class="header">预约详情</view>
	<view class="content">
		<view class="content_line">
			<text class="line_left">客户姓名:</text>
			<text class="line_right">{{item.member_name}}</text>
		</view>
		<view class="content_line">
			<text class="line_left">预约项目:</text>
			<text class="line_right">{{item.card_name}}</text>
		</view>
		<view class="content_line">
			<text class="line_left">手工费:</text>
			<text class="line_right">{{item.fee}}</text>
		</view>
		<view class="content_line">
			<text class="line_left">客户电话:</text>
			<text class="line_right">{{item.phone}}</text>
		</view>
		<view class="content_line">
			<text class="line_left">预约日期:</text>
			<text class="line_right">{{item.date}}</text>
		</view>
		<view class="content_line">
			<text class="line_left">预约时间:</text>
			<text class="line_right">{{item.stime}}--{{item.etime}}</text>
		</view>
		<view class="content_line">
			<text class="line_left">美容师:</text>
			<picker class="line_right" @change="bindUser" :value="userIndex"
			:range="userList" range-key="name" v-if="userList.length > 0">
				<view>
					{{userList[userIndex]['name']}}
					<image class="picker_img" src="/static/img/buttom.png"></image>
				</view>
			</picker>
		</view>
		<view class="content_line">
			<text class="line_left">客户评分:</text>
			<radio-group @change="bindTypeChange" class="radioClass">
				<label>
					<radio value="1" :checked="item.star == 1" :disabled="!show"/>
					<view>1分</view>
				</label>
				<label>
					<radio value="3" :checked="item.star == 3" :disabled="!show"/>
					<view>3分</view>
				</label>
				<label>
					<radio value="5" :checked="item.star == 5" :disabled="!show"/>
					<view>5分</view>
				</label>
			</radio-group>
		</view>
		<!-- <view class="line_left height80">备注:</view>
		<textarea class="text_remark" disabled auto-height maxlength="-1" v-model="item.remark"/> -->
		<view class="list_center_item" v-if="item.goods.length > 0">
			<view class="item_top">使用物品</view>
			<view class="item_content1" v-for="(iitem,iindex) in item.goods" :key="iindex">
				<text class="oneChild">{{iitem.name}}</text>
				<text class="twoChild">{{iitem.use_num}}个/次</text>
			</view>
		</view>
		<view class="line_left height80" v-if="item.sign_img">签名:</view>
		<image v-if="item.sign_img" class="sign_img" :src="imgUrl+item.sign_img"></image>
		
		<view style="width:100%;height:120rpx;text-align: center;line-height: 120rpx;font-size:12px;">
			天意美业直通车
		</view>
	</view>
	<view class="form_footer">
		<view class="footer_left" @click="cancel" v-if="show">取消预约</view>
		<view class="footer_left_false" v-else>取消预约</view>
		<view class="footer_right" @click="confirm" v-if="show">完成</view>
		<view class="footer_left_false" v-else>完成</view>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			//oaRole 1:店长2:员工3:商户
			imgUrl:this.url,
			item:{},
			userList:[],
			userIndex:0,
			type:0,
			show:true
		}
	},
	onLoad:function(e){
		this.item = JSON.parse(e.item)
		console.log(this.item)
		this.oaRole = uni.getStorageSync('oaRole')
		this.getList()
		if(uni.getStorageSync('oaRole') == 2){
			//this.item.type = false
			this.show = false
		}else{
			if(this.item.type == 2 || this.item.type == 3){
				this.show = false
			}
		}
	},
	methods: {
		getList:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
			}
			var that = this
			request({
				url: 'manage/user/all',
				method: 'get',
				data:data,
				success: (res) => {
					that.userList = res.data.data
					for(var x in res.data.data){
						if(that.item.user_id == res.data.data[x]['uid']){
							that.userIndex = x
						}
					}
				},
			})
		},
		bindUser:function(e){
			this.userIndex = e.detail.value
			this.item.user_id = this.userList[e.detail.value].uid
		},
		cancel:function(){
			var data = {id:this.item.id}
			var that = this
			this.show = false
			request({
				url: 'manage/mark/cancel',
				method: 'put',
				data:data,
				success: (res) => {
					if(res.data.code == 1){
						that.item.type = 3
						uni.showToast({
							title:'取消成功',
							icon: 'none',
							duration: 2000,
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 2000);
							}
						})
					}else{
						that.show = true
						uni.showToast({
							title:'取消失败',
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})
		},
		bindTypeChange:function(e){
			let index = e.detail.value
			this.item.star = e.detail.value
		},
		confirm:function(){
			if(!this.item.star){
				uni.showToast({
					title:'请输入美容师评价',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			var that = this
			this.item.type = 0
			that.show = false
			request({
				url: 'manage/mark/save',
				method: 'put',
				data:this.item,
				success: (res) => {
					if(res.data.code == 1){
						that.item.type = 2
						uni.showToast({
							title:'成功',
							icon: 'none',
							duration: 2000,
							success() {
								setTimeout(function() {
									uni.navigateTo({
									  url:'./sign?id='+that.item.id
									})
								}, 2000);
							}
						})
					}else{
						that.show = true
						uni.showToast({
							title:res.data.msg,
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})
		}
	}
}
</script>
<style>
@import url("../css/mark/info.css");
</style>